<div class="top-header clearfix"> 
  
  <!-- Logo -->
  <div class="logo {{admin.logo}}">
    <div class="logo-title"><i class="fa fa-cube ph-5"></i>Adminer <strong>App</strong></div>
    <div class="logo-icon"><i class="fa fa-cube ph-5"></i></div>
  </div>
  
  <!-- needs to be put after logo to make it working-->
  <div class="menu-button" toggle-off-canvas> 
    <a href="javascript:void(0)" alt=""> <i class="fa fa-fw fa-dedent"></i> </a> 
  </div>
  
  <div class="top-nav">
    <ul class="nav-left list-unstyled">
      <li> 
        <a href="javascript:void(0)" class="toggle-min" id="step3" data-toggle-nav-collapsed-min><i class="fa fa-navicon fa-lg"></i></a> 
      </li>
      
      <li class="hidden-xs" toggle-profile=""></li>
      
      <li class="dropdown" dropdown on-toggle="toggled(open)"> 
       
        <a href="javascript:void(0)" class="dropdown-toggle" dropdown-toggle> <i class="fa fa-envelope fa-lg"></i> </a>
        
        <div class="dropdown-menu panel with-arrow animated fadeInDown">
          <div class="panel-heading"> 
            You have 4 mails. 
          </div>
          
          <div class="overflow" data-slim-scroll data-scroll-height="240px">
          
            <ul class="list-group">
            
              <li class="list-group-item nb"> 
                 <a herf="javascript:void(0)" class="pull-left avatar"> 
                   <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> 
                     <i class="on bottom text-white"></i> 
                 </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
              <li class="list-group-item nb"> 
                <a herf="javascript:void(0)" class="pull-left avatar"> 
                  <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> 
                    <i class="on bottom text-white"></i> 
                </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
              <li class="list-group-item nb"> 
                <a herf="javascript:void(0)" class="pull-left avatar"> 
                  <img src="images/photos/user3.png" alt="..." class="img-circle img40_40"> 
                    <i class="on bottom text-white"></i> 
                </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
              <li class="list-group-item nb"> 
                <a herf="javascript:void(0)" class="pull-left avatar"> 
                  <img src="images/photos/user4.png" alt="..." class="img-circle img40_40"> 
                    <i class="on bottom text-white"></i> 
                </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
              <li class="list-group-item nb"> 
                <a herf="javascript:void(0)" class="pull-left avatar"> 
                  <img src="images/photos/user5.png" alt="..." class="img-circle img40_40"> 
                    <i class="on bottom text-white"></i> 
                </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
              <li class="list-group-item nb"> 
                <a herf="javascript:void(0)" class="pull-left avatar"> 
                  <img src="images/photos/user6.png" alt="..." class="img-circle img40_40"> 
                    <i class="on bottom text-white"></i> 
                </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
              <li class="list-group-item nb"> 
                <a herf="javascript:void(0)" class="pull-left avatar"> 
                  <img src="images/photos/user7.png" alt="..." class="img-circle img40_40"> 
                    <i class="on bottom text-white"></i> 
                </a>
                <div class="inline-block">
                  <div class="text-small ph-10">Andy sent you a message</div>
                  <small class="text-small ph-10">15 minutes ago</small> 
                </div>
              </li>
              
            </ul>
            
          </div>
          
          <div class="panel-footer"> 
            <a href="#/mail/inbox">Show all mails.</a> 
          </div>
          
        </div>
        
      </li>
      
      <li class="dropdown" dropdown on-toggle="toggled(open)"> 
        <a href="javascript:void(0)" class="dropdown-toggle" dropdown-toggle> 
          <i class="fa fa-bell fa-lg"></i> 
        </a>
        <div class="dropdown-menu panel with-arrow animated fadeInDown">
         <div class="panel-heading"> Notifications </div>
           <div data-slim-scroll="" data-scroll-height="330px">
          
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-danger"> 
                  <i class="fa fa-upload"></i> 
                </div>
                <p class="widgetcomment-head"> New Upload </p>
                <p>New file <span class="text-red">document.doc</span> uploaded to the cloud </p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-success"> 
                  <i class="fa fa-bell-o"></i> 
                </div>
                <p class="widgetcomment-head"> Important Notification </p>
                <p>There is <span class="text-red">Server 10</span> is not working Properly</p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-info"> 
                  <i class="fa fa-bell-o"></i> 
                </div>
                <p class="widgetcomment-head"> New Upload </p>
                <p>New file <span class="text-red">document.doc</span> uploaded to the cloud </p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-warning"> 
                  <i class="fa fa-bell-o"></i> 
                </div>
                <p class="widgetcomment-head"> Important Notification </p>
                <p>There is <span class="text-red">Server 10</span> is not working Properly</p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-info"> 
                  <i class="fa fa-bell-o"></i> 
                </div>
                <p class="widgetcomment-head"> Important Notification </p>
                <p>There is <span class="text-red">Server 10</span> is not working Properly</p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-success"> 
                  <i class="fa fa-cube"></i> 
                </div>
                <p class="widgetcomment-head"> New Upload </p>
                <p>New file <span class="text-red">document.doc</span> uploaded to the cloud </p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-warning"> 
                  <i class="fa fa-bell-o"></i> 
                </div>
                <p class="widgetcomment-head"> Important Notification </p>
                <p>There is <span class="text-red">Server 10</span> is not working Properly</p>
              </div>
            </div>
            
            <div class="widget-comments">
              <div class="widgetcomment-item">
                <div class="counter-icon icon-sm bg-success"> 
                  <i class="fa fa-cloud"></i> 
                </div>
                <p class="widgetcomment-head"> New Upload </p>
                <p>New file <span class="text-red">document.doc</span> uploaded to the cloud </p>
              </div>
            </div>
            
          </div>
          <div class="panel-footer"> 
            <a href="javascript:void(0)">Show all mails.</a> 
          </div>
        </div>
      </li>
      
    </ul>
    
    <ul class="nav-right pull-right list-unstyled">
    
      <li class="hidden-xs hidden-sm" fullscreen-Mode></li>
      
      <li class="dropdown langs text-normal" data-ng-controller="LangCtrl" dropdown on-toggle="toggled(open)"> 
        
        <a href="javascript:void(0)" class="dropdown-toggle" dropdown-toggle> {{lang}} </a>
        
        <ul class="dropdown-menu with-arrow pull-right list-langs animated fadeInDown" role="menu">
          <li data-ng-show="lang !== 'English' "> 
            <a href="javascript:void(0)" data-ng-click="setLang('English')">English</a>
          </li>
          <li data-ng-show="lang !== 'Deutsch' "> 
            <a href="javascript:void(0)" data-ng-click="setLang('Deutsch')">Deutsch</a>
          </li>
          <li data-ng-show="lang !== 'français' "> 
            <a href="javascript:void(0)" data-ng-click="setLang('français')">français</a>
          </li>
          <li data-ng-show="lang !== 'Italiano' "> 
            <a href="javascript:void(0)" data-ng-click="setLang('Italiano')">Italiano</a>
          </li>
          <li data-ng-show="lang !== 'Portugal' "> 
            <a href="javascript:void(0)" data-ng-click="setLang('Portugal')">Portugal</a>
          </li>
          <li data-ng-show="lang !== 'Русский язык' "> 
            <a href="javascript:void(0)" data-ng-click="setLang('Русский язык')">Русский язык</a>
          </li>
        </ul>
      </li>
      
      <li class="dropdown text-normal nav-profile" dropdown on-toggle="toggled(open)"> 
        <a href="javascript:void(0)" class="dropdown-toggle" dropdown-toggle> 
          <img src="images/photos/user2.png" alt="" class="img-circle img40_40"> 
            <span class="hidden-xs ph-5"> 
              <span data-i18n="Lisa Doe"></span> 
              <i class="fa fa-caret-down"></i>
            </span> 
        </a>
        <ul class="dropdown-menu with-arrow pull-right animated fadeInDown">
          <li> 
             <a href="#/pages/profile"> 
               <i class="fa fa-user"></i> 
               <span data-i18n="My Profile"></span> 
             </a> 
          </li>
          <li> 
             <a href="#/tasks/tasks"> 
               <i class="fa fa-check"></i> 
               <span data-i18n="My Tasks"></span> 
             </a> 
          </li>
          <li> 
             <a href="#/pages/lock-screen"> 
               <i class="fa fa-lock"></i> 
               <span data-i18n="Lock"></span> 
             </a> 
          </li>
          <li> 
             <a href="#/pages/signin"> 
               <i class="fa fa-sign-out"></i> 
               <span data-i18n="Log Out"></span> 
             </a> 
          </li>
        </ul>
      </li>
      
      <li class="hidden-xs">
         <a href="javascript:void(0)" data-right-Sidebar>
           <i class="fa fa-navicon fa-lg"></i>
         </a>
      </li>
      
    </ul>
    
  </div>
</div>